/*
 * SPDX-FileCopyrightText: 2024 Volodymyr Shymanskyy
 * SPDX-License-Identifier: MIT
 *
 * The software is provided "as is", without any warranties or guarantees (explicit or implied).
 * This includes no assurances about being fit for any specific purpose.
 */

body {
    display: flex;
    flex-direction: column;
    opacity: 0;
}

body.loaded {
    opacity: 1;
}

.github-fork-ribbon:before {
    background-color: #666;
}

.logo {
    font-weight: normal;
}

#tool-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px 5px;
    user-select: none;
}

#container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

#side-menu {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column-reverse;
    background-color: var(--bg-color-menu);
    overflow-y: auto;
    transition: margin-left var(--animation),
                left var(--animation);
    user-select: none;
}

#side-menu.hidden {
    margin-left: -300px;
}

#main-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 0;
}

#editor {
    background: var(--bg-color-edit);
    flex: 1;
    overflow: auto;
}

#terminal-container {
    height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: content-box;
}

#terminal-tabs {
    flex: 0 0;
    cursor: row-resize;
    padding: 1px 5px;
    background: var(--bg-color);
}

#menu-tabs {
    flex: 0 0 24px;
    padding: 5px 0;
}

#menu-about {
    position: relative;
}

#side-menu .tab-content {
    flex: 0 1 100%;
    overflow: scroll;
    padding: 10px 10px;
}

#xterm {
    height: 0px;
    background: var(--bg-color-edit);
}

.marked-viewer {
    height: 100%;
    width: 100%;
    padding: 10px;
}

.hexed-viewer {
}
.hexed-line {
    display: flex;
}
.hexed-address, .hexed-hex-part, .hexed-ascii-part {
    padding: 0 8px;
}
.hexed-address {
    font-weight: 300;
    border-right: 1px solid var(--bg-color);
}
.hexed-hex-part {
    color: #f8f8f2;
}
.hexed-ascii-part {
    color: #e6db74;
}

.cm-editor {
    height: 100%;
    width: 100%;
    font-size: 0.9rem;
}

/* Fix touch interaction on iOS */
.cm-editor, .cm-scroller, .cm-content, .tab-content, #side-menu {
    touch-action: pan-x pan-y !important;
    overscroll-behavior: none !important;
}

#menu-file-title, #menu-pkg-title, #menu-settings-title, #menu-tools-title {
    font-weight: bold;
}

#menu-file-tree div, #menu-pkg-list div, #menu-settings-list div, #menu-tools-list div {
    margin: 5px 0;
    line-height: 1.2em;
}

#menu-file-tree div .name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#menu-file-tree div .selected {
    font-weight: bold;
}

.menu-action {
    font-weight: normal;
    float: right;
    font-size: 0.8rem;
    padding: 0 0 0 5px;
    opacity: 60%;
}

@media (max-width: 768px) {
    #side-menu {
        position: absolute;
        left: -100%;
        width: 75%;
        top: 0;
        bottom: 0;
        z-index: 1000;
    }

    #side-menu.show {
        left: 0;
    }

    #overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background-color: transparent;
        overflow: hidden;
        visibility: hidden;
    }

    #overlay.show {
        visibility: visible;
        background-color: #00000088;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        transition: visibility 0s,
                    background-color var(--animation),
                    backdrop-filter var(--animation),
                    -webkit-backdrop-filter var(--animation);
    }

    #overlay:not(.show) {
        transition: visibility var(--animation), 
                    background-color var(--animation), 
                    backdrop-filter var(--animation),
                    -webkit-backdrop-filter var(--animation);
    }
}

@media (max-width: 768px) and (display-mode: standalone) {
    #app-expand {
        display: none;
    }
}

